<template>
  <HeadBar />
  <div class="flex-wrapper">
    <SideBarLeft
      ref="sidebar"
      @child-event="childEventHandler"
      :expand="false"
    />
    <div class="detail">
      <div class="head" ref="headContent" v-if="showHead">
        <HeadItem
          :imageSrc="require('../../assets/保存_1.png')"
          buttonText="保存"
        />
        <Division />
        <HeadItem
          :imageSrc="require('../../assets/目录_1.png')"
          buttonText="目录"
        />
        <Division />
        <HeadItem
          :imageSrc="require('../../assets/打印_1.png')"
          buttonText="打印"
        />
      </div>
      <div class="main">
        <div class="main_head" ref="mainContent">
          <div class="main_head_1" :style="{ width: dynamicWidth }">
            <img
              src="../../assets/back.png"
              style="height: 2.8vh; cursor: pointer"
              @click="backHandler"
            />
            <span style="margin: 0 auto">{{ label }}</span>
          </div>
          <div class="main_head_2">
            <img src="../../assets/Nav-H.png" style="height: 20px" />
          </div>
          <div class="main_head_3">
            <span style="margin: 0 auto">图片名：图片描述</span>
            <img
              src="../../assets/forward.png"
              style="height: 2.8vh; cursor: pointer"
              @click="forwardHandler"
            />
          </div>
        </div>
        <Content
          @child-event="ContextEventHandler"
          ref="content"
          :dynamicWidth="dynamicWidth"
        />
      </div>
    </div>
  </div>
  <Buttom />
</template>

<script setup>
import HeadBar from "@/components/HeadBar/index.vue";
import SideBarLeft from "@/components/Sidebar/sideBarLeft.vue";
import { useRouter, useRoute } from "vue-router";
import {
  onBeforeMount,
  ref,
  onMounted,
  getCurrentInstance,
  nextTick,
} from "vue";
import Buttom from "@/components/Buttom/index.vue";
import HeadItem from "@/components/HeadItem/index.vue";
import Division from "@/components/Division/index.vue";
import { setHead } from "@/utils/setHead";
import Content from "@/views/details/content.vue";

const router = useRouter();
const route = useRoute();
const showHead = ref(true);
const label = ref("");
const sidebar = ref(null);
const headContent = ref(null);
const mainContent = ref(null);
const content = ref(null);
let scrollTop = 0;
const bus = getCurrentInstance().appContext.config.globalProperties.$bus;
const dynamicWidth = ref("60vw");

const childEventHandler = async () => {
  router.push({ path: "/", query: { scrollTop } });
};

const backHandler = async () => {
  console.log("backHandler");
};

const forwardHandler = async () => {
  console.log("forwardHandler");
};

const countHeight = async () => {
  nextTick(() => {
    const height =
      sidebar.value.$el.offsetHeight -
      headContent.value.offsetHeight -
      mainContent.value.offsetHeight;
    const viewportHeight = window.innerHeight;
    content.value.$el.style.height = (height / viewportHeight) * 100 + "vh";
  });
};

const ContextEventHandler = (params) => {
  const vw = params.substring(0, params.indexOf("v"));
  document.querySelector(".main_head_1").style.width =
    (Number(vw) * window.innerWidth) / 100 - 6 + "px";
};

onBeforeMount(() => {
  label.value = route.query.label;
  scrollTop = route.query.scrollTop;
});

onMounted(() => {
  //监听全局事件总线
  bus.on("head", (msg) => {
    showHead.value = msg;
    setHead(document.querySelector(".main"), msg, 13);
  });
  //计算主要显示的内容还有多少高度
  countHeight();
});
</script>

<style>
.flex-wrapper {
  display: flex; /* 使用 Flexbox 布局 */
  /* 可以根据需要设置其他样式 */
  padding: 0px;
}
.detail {
  width: 100%;
}
.head {
  display: flex;
  height: 5vh;
  background-color: rgb(204, 204, 204);
  justify-content: right;
  align-items: center;
}
.main {
  background-color: rgb(204, 204, 204);
}
.main_head {
  display: flex;
  height: 24px;
  margin-left: 1vw;
  background-color: rgb(18, 119, 189);
}
.main_head_1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #dbdbdb;
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
}
.main_head_2 {
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 24px;
}
.main_head_3 {
  display: flex;
  flex: 1;
  justify-content: space-between;
  align-items: center;
  color: #dbdbdb;
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
}
</style>
